import { memo } from "react";
import "./index.scss";
import classNames from "classnames";

type propsT = {
    onChange?:Function,
    id?:string,
    className?:string,
    value:boolean,
    disabled?:boolean
}

const MyCheckBox = memo((prop:propsT)=>{
    function handleChange(e:React.ChangeEvent<HTMLInputElement>){
        if(prop.onChange){
            prop.onChange(e.target.checked,prop.id);
        }
    }
    return (
        <>
            <label className={classNames('myCheckBox',prop.className)}>
                <input 
                    title="1" 
                    type="checkbox" 
                    onChange={(e)=>handleChange(e)}
                    checked={prop.value}
                    disabled={prop.disabled}
                />
                <span className="myCheckBox_slide"></span>
            </label>
        </>
    )
})

export default MyCheckBox;